<!--
 * @Description: 源订单页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-18 18:48:27
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-04-20 23:06:34
 -->
<template>
  <div>
    <el-table v-loading.body="loading" :data="originData" element-loading-text="拼命加载中" stripe border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column v-if="showCheckbox" type="selection" width="55" />
      <el-table-column label="ID" prop="id" width="80" />
      <el-table-column label="订单来源" prop="source" align="center" width="100" />
      <el-table-column label="手机号" prop="phone" align="center" width="130" />
      <el-table-column label="收件人" prop="consignee" align="center" width="80" />
      <el-table-column label="订单状态" prop="status" align="center" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ statusList[scope.row.status] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="sku类型" prop="sku_type" align="center" width="100" />
      <el-table-column label="是否有代餐" align="center" width="120">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.with_meal_powder" on-color="#13ce66" on-text="有" off-text="无" on-value="1" off-value="0" @change="changeAttribute($event, scope.row.id, 'with_meal_powder')" />
        </template>
      </el-table-column>
      <el-table-column label="是否VIP" align="center" width="120">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.is_vip" on-color="#13ce66" on-text="是" off-text="否" on-value="1" off-value="0" @change="changeAttribute($event, scope.row.id, 'is_vip')" />
        </template>
      </el-table-column>
      <el-table-column label="宝贝标题" prop="goods_title" align="center" width="300" />
      <el-table-column label="宝贝描述" prop="goods_info" align="center" width="100" />
      <el-table-column label="宝贝价格" prop="price" align="center" width="100" />
      <el-table-column label="外部采购编号" prop="external_procure_number" align="center" width="200" />
      <el-table-column label="收货地址" prop="delivery_address" align="center" width="200" />
      <el-table-column label="买家备注" prop="comments" align="center" width="130" />
      <el-table-column label="订单备注" prop="memo" align="center" width="130" />
      <el-table-column label="创建时间" prop="add_time" align="center" width="170" />
      
      <el-table-column fixed="right" label="操作" width="160" align="center">
        <template slot-scope="scope">
          <edit :data="scope.row" :sup-this="supThis" />
          <el-popconfirm title="确定删除当前订单吗？" @onConfirm="deleted(scope.row.id)">
            <el-button v-if="scope.row.status != 'cancel' && scope.row.status != 'refunded' && scope.row.status != 'finish'" slot="reference" size="mini" type="warning">删除 </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import edit from './edit'

export default {
  components: { edit },
  filters: {
    statusFilter(status) {
      const statusMap = {
        'initial': 'primary',
        'third_party': 'danger',
        'pass': 'success',
        'ongoing': 'warning',
        'finish': 'success',
        'refunded': 'info',
        'cancel': 'info'
      }
      return statusMap[status]
    }
  },
  props: {
    showCheckbox: {
      type: Boolean,
      default: false
    },
    originData: {
      type: Array,
      required: true
    },
    statusList: {
      type: Object,
      required: true
    },
    loading: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      supThis: this
    }
  },
  methods: {
    handleSelectionChange(items) {
      const ids = []
      items.forEach(element => {
        ids.push(element.id)
      })
      this.$emit('change', ids)
    },
    deleted(id) {
      this.$api.order.origin
        .del(id)
        .then(res => {
          this.$parent.init()
          this.$notify({ title: '成功', message: '订单删除成功', type: 'success', duration: 2500 })
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
